@import "../../../assets/styles/global";

.tabs {
  --tab-row-height: 33px;
  --tab-height: 32px;

  height: 100%;

  &__tabs-row {
    display: flex;
    background: var(--color-neutral-surface);
    border-bottom: 1px solid var(--color-neutral-border);
    height: var(--tab-row-height);
  }

  &__tab-container {
    min-width: 0;
    flex-shrink: 1;

    &_active {
      flex-shrink: 0;
    }
  }

  &__contents {
    background: var(--color-neutral-background);
    height: calc(100% - var(--tab-row-height));
    position: relative;
    z-index: 1;
    overflow: hidden auto;

    & .main-content {
      overflow: auto;
      padding-bottom: calc(var(--bottombar-height) + 8px);
    }

    &_resizing {
      position: relative;
      pointer-events: none;
    }

    &::before {
      top: 0;
      left: 0;
      content: "";
      width: 100%;
      z-index: 100;
      display: block;
      position: absolute;
    }
  }

  &_collapsed {
    & .tabs__contents {
      flex: 1;
    }
  }

  &__drop-space-after {
    width: 100%;
    flex-shrink: 100;

    &_hoveringRight {
      &:hover {
        &::before {
          content: '';
          position: absolute;
          background: var(--grape_400);
          width: 4px;
          height: 100%;
        }
      }
    }
  }
}

.panel-tabs {
  &__draggable-tab {
    transform: translateY(2px);
  }

  &__tab {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 24px 6px;
    height: var(--tab-height);
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.15px;
    border-color: var(--color-neutral-border);
    margin: 0 2px;
    display: block;
    cursor: grab;
    user-select: none;
    border-top-left-radius: var(--corner-radius-smaller);
    border-top-right-radius: var(--corner-radius-smaller);

    &_active {
      overflow: visible;
      width: fit-content;
      border-width: 1px 1px 0;
      transform: translate(-1px, -1px);
      border-style: solid;
      background: var(--color-neutral-background);
      box-shadow: 1px 4px 0 rgba(var(--color-neutral-shadow-raw) / 4%), -1px 4px 0 rgba(var(--color-neutral-shadow-raw) / 4%);
    }

    &:hover svg {
      display: block;
    }
  }

  &__ghost-tab {
    opacity: 0.8;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    display: none;
  }

  &__contents {
    background: var(--color-neutral-background);
  }

  &__icon {
    position: absolute;
    left: 6px;
    top: 8px;
    color: var(--icon-color);
    display: none;
    pointer-events: none;
  }
}

.drag_over_tab_left {
  &::before {
    content: '';
    position: absolute;
    left: 0;
    background: var(--grape_400);
    width: 4px;
    height: 30px;
    transform: translateY(-4px);
  }
}

.drag_over_tab_right {
  &::after {
    content: '';
    position: absolute;
    right: 0;
    background: var(--grape_400);
    width: 4px;
    height: 30px;
    transform: translateY(-4px);
  }
}

.drag_over_empty_tab_space {
  &::before {
    content: '';
    transform: translate(-4px, 2px);
    position: absolute;
    background: var(--grape_400);
    width: 4px;
    height: 30px;
  }
}